<template>
  <div id="enterprise-package">
    <c-title text="企业套餐"></c-title>
    <div class="current-meal-title">当前套餐</div>
    <div class="meal-row" v-if="currentPackage">
      <div class="meal-name">{{currentPackage.type_name ? currentPackage.type_name : currentPackage.name}}</div>
      <div class="meal-tip">{{currentPackage.desc}}</div>
    </div>
    <div class="change-pane">
      <div class="change-meal" @click="meal_show = true;">更换套餐</div>
      <div class="meal-record" @click="goMealrecord">套餐记录<van-icon name="arrow" class="arrow-icon"/> </div>
    </div>
    <meal-popup :meal_show.sync="meal_show" type='change' :currentPackage="currentPackage" v-if="meal_show" @optionPackage="optionPackage" ></meal-popup>
  </div>
</template>
<script>
import enterprise_package_controller from "./enterprise_package_controller";

export default enterprise_package_controller;
</script>
<style lang="scss" rel="stylesheet/scss" scoped>
#enterprise-package {
  .current-meal-title {
    font-size: 0.85rem;
    margin: 0.925rem 1rem;
    text-align: left;
  }

  .meal-row {
    background: white;
    padding: 0.9rem 1rem;
    text-align: left;

    .meal-name {
      font-size: 0.85rem;
      font-weight: 500;
      color: #333;
    }

    .meal-tip {
      font-size: 0.8rem;
      font-weight: 400;
      color: #c2c2c2;
      margin-top: 0.425rem;
    }
  }

  .change-pane {
    margin-top: 3.375rem;
    padding: 0 0.6rem;

    .change-meal {
      color: white;
      background: #4978f8;
      border-radius: 1.025rem 1.025rem 1.025rem 1.025rem;
      padding: 0.65rem 0;
      font-size: 0.8rem;
      font-weight: 400;
    }

    .meal-record {
      margin-top: 0.825rem;
      text-align: center;
      font-size: 0.8rem;
      font-weight: 400;
      color: #999;

      .arrow-icon {
        zoom: 0.8;
      }
    }
  }
}
</style>
